<template>
	<!-- 我的余额模块 -->
	<view :style="$theme.pageStyle">
		<view class='my-account'>
			<view class='wrapper'>
				<view class='header'>
					<view class='headerCon'>
						<view class='account acea-row row-top row-between'>
							<view class='assets'>
								<view>课卡名称</view>
								<view class='money'>{{Card.name}}</view>
							</view>
						</view>
						<view class='cumulative acea-row row-middle'>
							<view class='item'>
								<view>有效期</view>
								<view class='money'>{{Card.time}}天</view>
							</view>
							<view class='item'>
								<view>可用次数</view>
								<view class='money'>{{Card.usable}}次</view>
							</view>
						</view>
						<view class="pictrue">
							<image
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/141713611294anrBkj.gif">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="contents">
				<view class="top_a">
					<view class="left_a">
						<view class="price_box">
							<span style="font-size: 14px;margin-right: 5px;">¥</span> <span>{{Card.price}}</span>
						</view>
						<view class="title_box">
							<span>{{Card.name}}</span>
						</view>
						<view class="desc_box" style="margin-top: 5px;">
							<span>{{Card.remark}}</span>
						</view>
					</view>
					<view class="right_a">

					</view>
				</view>
				<view class="con_item">
					<view class="quanyi">
						<span style="margin-right: 10px;">
							<image
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/4216940682421pOiDG.png"
								mode=""></image>
						</span> 课卡详情
						<span style="margin-left: 10px;">
							<image
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/4216940682421pOiDG.png"
								mode=""></image>
						</span>
					</view>

					<view class="card_item_tt">

						<view class="goods_box">
							<view class="goods_title">
								可用次数
							</view>
							<view class="goods_name">
								{{Card.usable}} 次
							</view>
						</view>

						<view class="goods_box">
							<view class="goods_title">
								支持课程
							</view>
							<view class="goods_name" style="display: grid;">
								<span v-for="(items , index) in Card.use_goods" :key="index"><span
										style="margin-left: 5px;">{{ items.name }}</span></span>
							</view>
						</view>
					</view>

					<view class="line">

					</view>

					<view style="padding: 40upx 38upx;">
						<u-parse :content="Card.content"></u-parse>
					</view>

				</view>
			</view>

		</view>
		
		<view style="height: 70px;"></view>
		
		<view class="btn_item pb-safe">
			<view class="botton" @click="buy()">
				<text class="text110">立即购买</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				Card: {},
			}
		},
		onLoad(opt) {
			this.id = opt.id
			uni.showLoading({
				title: '加载中'
			});
			this.initData();
		},
		methods: {
			initData() {
				$H.post('card/detail', {
					id: this.id
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.Card = res.data
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			ToUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.my-account {
		.accountTitle {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 99;

			.sysTitle {
				width: 100%;
				position: relative;
				font-weight: 500;
				color: #333333;
				font-size: 30rpx;

				.iconfont {
					position: absolute;
					font-size: 36rpx;
					left: 11rpx;
					width: 60rpx;
				}
			}
		}

		.advert {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx auto 0 auto;
			padding: 0 8px;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				height: 108rpx;
				line-height: 108rpx;
				border-bottom: 1px solid #eee;
			}

			.list {
				margin-top: 34rpx;

				.line {
					height: 126rpx;
					width: 1rpx;
					background-color: #EEEEEE;
				}

				.item {
					text-align: center;
					font-weight: 400;
					color: #999999;
					font-size: 22rpx;

					.pictrue {
						width: 66rpx;
						height: 66rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-weight: 500;
						color: #333333;
						font-size: 28rpx;
						margin: 20rpx 0 8rpx 0;
					}
				}
			}
		}
	}

	.my-account .wrapper {
		padding-top: 32rpx;
	}

	.my-account .wrapper .header {
		width: 710rpx;
		height: 362rpx;
		background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
		border-radius: 32rpx;
		margin: 0 auto;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		position: relative;
	}

	.my-account .wrapper .header .headerCon {
		padding-top: 36rpx;
	}

	.my-account .wrapper .header .headerCon .pictrue {
		height: 284rpx;
		width: 290rpx;
		position: absolute;
		right: 0;
		bottom: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-account .wrapper .header .headerCon .account {
		padding: 0 32rpx;
	}

	.my-account .wrapper .header .headerCon .account .assets .money {
		font-size: 64rpx;
		color: #fff;
		font-family: "SemiBold";
		margin-top: 12rpx;
	}

	.my-account .wrapper .header .headerCon .account .recharge {
		font-size: 24rpx;
		width: 112rpx;
		height: 56rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		line-height: 56rpx;
		color: var(--color-primary);
		font-weight: 500;
	}

	.my-account .wrapper .header .headerCon .cumulative {
		width: 100%;
		height: 142rpx;
		background: rgba(255, 255, 255, 0.1);
		margin-top: 62rpx;
		padding-left: 32rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.my-account .wrapper .header .headerCon .cumulative .item {
		// flex: 1;
		width: 250rpx;
		position: static;
		z-index: 9;
	}

	.my-account .wrapper .header .headerCon .cumulative .item .money {
		font-size: 40rpx;
		font-family: 'SemiBold';
		color: #fff;
		margin-top: 12rpx;
	}

	.my-account .wrapper .nav {
		margin: 20rpx;
	}

	.my-account .wrapper .nav .item {
		font-size: 24rpx;
		color: #999;
		width: 348rpx;
		height: 152rpx;
		background: linear-gradient(180deg, #FFF7F0 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		border: 4rpx solid #fff;
		padding: 0 31rpx;
		box-sizing: border-box;

		.name {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 8rpx;
		}
	}

	.my-account .wrapper .nav .item .pictrue {
		width: 96rpx;
		height: 96rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-account .wrapper .list {
		padding: 0 30rpx;
	}

	.my-account .wrapper .list .item {
		margin-top: 44rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
		text-align: center;
		line-height: 82rpx;
		color: #fff;
		font-size: 40rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont.yellow {
		background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
	}

	.my-account .wrapper .list .item .picTxt .iconfont.green {
		background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
	}

	.my-account .wrapper .list .item .picTxt {
		width: 428rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.my-account .wrapper .list .item .picTxt .text {
		width: 317rpx;
	}

	.my-account .wrapper .list .item .picTxt .text .infor {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.my-account .wrapper .list .item .bnt {
		font-size: 26rpx;
		color: #282828;
		width: 156rpx;
		height: 52rpx;
		border: 1px solid #ddd;
		border-radius: 26rpx;
		text-align: center;
	}

	.my-account .wrapper .list .item .bnt.end {
		font-size: 26rpx;
		color: #aaa;
		background-color: #f2f2f2;
		border-color: #f2f2f2;
	}


	.acea-row.row-between {
		justify-content: space-between;
	}

	.acea-row.row-top {
		align-items: flex-start;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.acea-row.row-middle {
		align-items: center;
	}

	.acea-row.row-between-wrapper {
		align-items: center;
		justify-content: space-between;
	}

	.contents {
		margin-top: 10px;
		background-color: #fff;
		border-radius: 20px 20px 0px 0px;
		padding: 20px;

		.top_a {
			display: flex;
			justify-content: space-between;

			.left_a {

				.price_box {
					font-size: 32px;
					color: #fa3534;
					font-weight: bold;
				}

				.title_box {
					margin-top: 10px;
					font-size: 22px;
					font-weight: bold;
				}

				.desc_box {
					font-size: 14px;
					color: #666;
				}
			}

			.right_a {}
		}

		.con_item {
			margin-top: 20px;

			.quanyi {
				display: flex;
				font-size: 16px;
				line-height: 25px;
				font-weight: 500;
				justify-content: center;

				image {
					width: 25px;
					height: 25px;
				}
			}
		}
	}

	.card_item_tt {
		// margin: 10px 15px 10px 15px;
		// border-radius: 16px;
		// padding: 10px 0px 10px 0px;
		// background-color: #FFFFFF;
		// box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		// transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
		position: relative;
	}

	.card_item {
		margin-top: 10px;
		box-sizing: border-box;
		// padding: 20px;
		// border-radius: 16px;
		display: block;
		margin-bottom: 20px;
		// background-color: #FFFFFF;
		// box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		// transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
		position: relative;
	}

	.title {
		font-weight: bold;
		font-size: 16px;
	}


	.card_detail {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;

		.desc {
			font-size: 16px;
			line-height: 16px;
		}

		.subs {
			color: #666;
			font-size: 14px;
			line-height: 16px;
		}
	}

	.goods_box {
		margin: 15px 0px 15px 0px;
		display: flex;
		justify-content: space-between;

		// margin-bottom: 10px;
		.goods_title {
			color: #666;
			font-size: 14px;
		}

		.goods_name {
			font-size: 14px;
			font-weight: 500;
		}
	}

	.line {
		margin: 20px;
		height: 1px;
		border-bottom: 1px #f8f8f8 solid;
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}

	.btn_item{
		background: #fff;
		height: 70px;
		position: fixed;
		bottom: 0px;
		width: 100%;
	}

	.botton {
		width: 94%;
		margin-left: 3%;
		border-radius: 8px;
		background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
		margin-top: 20rpx;
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.zhanwei {
		height: 120px;
		background-color: #fff;
	}
</style>